@if (book$ | async; as book) {
  <form [formGroup]="metadataForm" class="flex flex-col h-full md:min-w-[60rem]">
    @if (isLoading) {
      <div class="absolute inset-0 bg-black opacity-25 z-10 "></div>
    }
    @if (isLoading) {
      <p-progressSpinner [style]="{position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)'}"></p-progressSpinner>
    }
    <div class="flex flex-col flex-grow overflow-auto md:py-2 md:px-2 ">
      <div class="flex flex-col md:flex-row w-full gap-4 mb-4">
        <div class="flex flex-col items-center gap-0 relative w-[250px] flex-shrink-0" style="margin: 0 auto;">
          <p-image
            [src]="urlHelper.getCoverUrl(book.id, book.metadata?.coverUpdatedOn)"
            alt="Cover Image"
            width="250"
            appendTo="body"
            lazyLoad
            [preview]="true">
          </p-image>
          @if (isUploading) {
            <p-progressSpinner
              class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
            </p-progressSpinner>
          }
          <div class="flex items-center gap-2 pt-4">
            <p-button
              icon="pi pi-refresh"
              (onClick)="regenerateCover(book.id)"
              pTooltip="Regenerate cover"
              tooltipPosition="top"
              [outlined]="true"
              severity="warn"
              size="small"
              [disabled]="book.metadata!['coverLocked']">
            </p-button>
            <p-button
              [disabled]="book.metadata!['coverLocked']"
              outlined
              size="small"
              icon="pi pi-search"
              label="Search"
              (onClick)="openCoverSearch()"
              pTooltip="Search for cover"
              tooltipPosition="top"
              severity="info">
            </p-button>
            <p-fileupload
              [chooseStyleClass]="'p-button-sm p-button-outlined'"
              pTooltip="Upload cover"
              tooltipPosition="top"
              [disabled]="book.metadata!['coverLocked']"
              name="file"
              [url]="getUploadCoverUrl()"
              mode="basic"
              chooseIcon="pi pi-upload"
              accept="image/jpeg,image/png"
              maxFileSize="5000000"
              chooseLabel="Upload"
              (onUpload)="onUpload($event)"
              (onError)="onUploadError($event)"
              [auto]="true"
              (onBeforeUpload)="onBeforeSend()">
            </p-fileupload>
            @if (!book.metadata!['coverLocked']) {
              <p-button pTooltip="Lock Cover" tooltipPosition="top" size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('thumbnailUrl')" severity="success"></p-button>
            }
            @if (book.metadata!['coverLocked']) {
              <p-button pTooltip="Unlock Cover" tooltipPosition="top" size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('thumbnailUrl')" severity="warn"></p-button>
            }
          </div>
        </div>
        <div class="flex flex-col flex-grow md:pl-2">

          <div class="flex flex-col md:flex-row w-full gap-4 pb-1">
            <div class="flex flex-col gap-1 md:basis-[45%] flex-shrink-0">
              <label class="text-sm" for="title">Title</label>
              <div class="flex withbutton">
                <input pInputText id="title" formControlName="title" class="w-full"/>
                @if (!book.metadata!['titleLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('title')" severity="success"></p-button>
                }
                @if (book.metadata!['titleLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('title')" severity="warn"></p-button>
                }
              </div>
            </div>

            <div class="flex flex-col gap-1 md:basis-[40%]">
              <label class="text-sm" for="subtitle">Subtitle</label>
              <div class="flex withbutton">
                <input pInputText id="subtitle" formControlName="subtitle" class="w-full"/>
                @if (!book.metadata!['subtitleLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('subtitle')" severity="success"></p-button>
                }
                @if (book.metadata!['subtitleLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('subtitle')" severity="warn"></p-button>
                }
              </div>
            </div>

            <div class="flex flex-col gap-1 md:w-[9rem]">
              <label class="text-sm" for="language">Language</label>
              <div class="flex withbutton">
                <input pInputText id="language" formControlName="language" class="w-full"/>
                @if (!book.metadata!['languageLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('language')" severity="success"></p-button>
                }
                @if (book.metadata!['languageLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('language')" severity="warn"></p-button>
                }
              </div>
            </div>
          </div>

          <div class="flex flex-col md:flex-row w-full gap-4 mt-2 pb-1">
            <div class="flex flex-col gap-1 md:basis-[45%] flex-shrink-0">
              <label class="text-sm" for="authors">Authors</label>
              <div class="flex withbutton">
                <p-autoComplete
                  class="w-full"
                  formControlName="authors"
                  [multiple]="true"
                  [fluid]="true"
                  [dropdown]="false"
                  [suggestions]="filteredAuthors"
                  [forceSelection]="false"
                  [showClear]="false"
                  (completeMethod)="filterAuthors($event)"
                  (onKeyUp)="onAutoCompleteKeyUp('authors', $event)"
                  (onSelect)="onAutoCompleteSelect('authors', $event)">
                </p-autoComplete>
                @if (!book.metadata!['authorsLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('authors')" severity="success"></p-button>
                }
                @if (book.metadata!['authorsLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('authors')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="flex flex-col gap-1 md:basis-[35%]">
              <label class="text-sm" for="publisher">Publisher</label>
              <div class="flex withbutton">
                <p-autoComplete
                  class="w-full"
                  inputStyleClass="w-full"
                  formControlName="publisher"
                  inputId="publisher"
                  [multiple]="false"
                  [dropdown]="false"
                  [suggestions]="filteredPublishers"
                  [forceSelection]="false"
                  [showClear]="false"
                  (completeMethod)="filterPublishers($event)">
                </p-autoComplete>
                @if (!book.metadata!['publisherLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('publisher')" severity="success"></p-button>
                }
                @if (book.metadata!['publisherLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('publisher')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="flex flex-col gap-1 md:basis-[20%]">
              <label class="text-sm" for="publishedDate">Publish Date</label>
              <div class="flex withbutton">
                <p-datepicker
                  class="w-full md:min-w-[7.5rem]"
                  formControlName="publishedDate"
                  inputId="publishedDate"
                  dataType="string"
                  dateFormat="yy-mm-dd"
                  [keepInvalid]="true"
                  [showIcon]="false"
                  [iconDisplay]="'input'"
                  fluid="true"
                  appendTo="body">
                </p-datepicker>
                @if (!book.metadata!['publishedDateLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('publishedDate')" severity="success"></p-button>
                }
                @if (book.metadata!['publishedDateLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('publishedDate')" severity="warn"></p-button>
                }
              </div>
            </div>
          </div>

          <div class="flex flex-col md:flex-row w-full gap-4 mt-2 pb-1">
            <div class="flex flex-col gap-1 w-full">
              <label class="text-sm" for="categories">Genres</label>
              <div class="flex withbutton">
                <div class="w-full">
                  <p-autoComplete
                    class="w-full"
                    formControlName="categories"
                    [multiple]="true"
                    [dropdown]="false"
                    [suggestions]="filteredCategories"
                    [forceSelection]="false"
                    [showClear]="true"
                    (completeMethod)="filterCategories($event)"
                    (onKeyUp)="onAutoCompleteKeyUp('categories', $event)"
                    (onSelect)="onAutoCompleteSelect('categories', $event)">
                  </p-autoComplete>
                </div>
                @if (!book.metadata!['categoriesLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('categories')" severity="success"></p-button>
                }
                @if (book.metadata!['categoriesLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('categories')" severity="warn"></p-button>
                }
              </div>
            </div>
          </div>

          <div class="flex flex-col md:flex-row w-full gap-4 mt-2 pb-1">
            <div class="flex flex-col gap-1 w-full">
              <label class="text-sm" for="moods">Moods</label>
              <div class="flex withbutton">
                <div class="w-full">
                  <p-autoComplete
                    class="w-full"
                    formControlName="moods"
                    [multiple]="true"
                    [dropdown]="false"
                    [suggestions]="filteredMoods"
                    [forceSelection]="false"
                    [showClear]="true"
                    (completeMethod)="filterMoods($event)"
                    (onKeyUp)="onAutoCompleteKeyUp('moods', $event)"
                    (onSelect)="onAutoCompleteSelect('moods', $event)">
                  </p-autoComplete>
                </div>
                @if (!book.metadata!['moodsLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('moods')" severity="success"></p-button>
                }
                @if (book.metadata!['moodsLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('moods')" severity="warn"></p-button>
                }
              </div>
            </div>
          </div>
          <div class="flex flex-col md:flex-row w-full gap-4 mt-2 pb-1">
            <div class="flex flex-col gap-1 w-full">
              <label class="text-sm" for="tags">Tags</label>
              <div class="flex withbutton">
                <div class="w-full">
                  <p-autoComplete
                    class="w-full"
                    formControlName="tags"
                    [multiple]="true"
                    [dropdown]="false"
                    [suggestions]="filteredTags"
                    [forceSelection]="false"
                    [showClear]="true"
                    (completeMethod)="filterTags($event)"
                    (onKeyUp)="onAutoCompleteKeyUp('tags', $event)"
                    (onSelect)="onAutoCompleteSelect('tags', $event)">
                  </p-autoComplete>
                </div>
                @if (!book.metadata!['tagsLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('tags')" severity="success"></p-button>
                }
                @if (book.metadata!['tagsLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('tags')" severity="warn"></p-button>
                }
              </div>
            </div>
          </div>

          <div class="flex flex-col md:flex-row w-full gap-4 mt-2 pb-1">
            <div class="flex flex-col gap-1 md:basis-[75%]">
              <label class="text-sm" for="seriesName">Series Name</label>
              <div class="flex withbutton">
                <p-autoComplete
                  class="w-full"
                  inputStyleClass="w-full"
                  formControlName="seriesName"
                  inputId="seriesName"
                  [multiple]="false"
                  [dropdown]="false"
                  [suggestions]="filteredSeries"
                  [forceSelection]="false"
                  [showClear]="false"
                  (completeMethod)="filterSeries($event)">
                </p-autoComplete>
                @if (!book.metadata!['seriesNameLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('seriesName')" severity="success"></p-button>
                }
                @if (book.metadata!['seriesNameLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('seriesName')" severity="warn"></p-button>
                }
              </div>
            </div>

            <div class="flex flex-col gap-1 md:w-[9rem]">
              <label class="text-sm" for="seriesNumber">Series #</label>
              <div class="flex withbutton">
                <input pInputText id="seriesNumber" formControlName="seriesNumber" class="w-full"/>
                @if (!book.metadata!['seriesNumberLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('seriesNumber')" severity="success"></p-button>
                }
                @if (book.metadata!['seriesNumberLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('seriesNumber')" severity="warn"></p-button>
                }
              </div>
            </div>

            <div class="flex flex-col gap-1 md:w-[9rem]">
              <label class="text-sm" for="seriesTotal">Series Total</label>
              <div class="flex withbutton">
                <input pInputText id="seriesTotal" formControlName="seriesTotal" class="w-full"/>
                @if (!book.metadata!['seriesTotalLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('seriesTotal')" severity="success"></p-button>
                }
                @if (book.metadata!['seriesTotalLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('seriesTotal')" severity="warn"></p-button>
                }
              </div>
            </div>

            <div class="flex flex-col gap-1 md:w-[9rem]">
              <label class="text-sm" for="pageCount">Pages</label>
              <div class="flex withbutton">
                <input pInputText id="pageCount" formControlName="pageCount" class="w-full"/>
                @if (!book.metadata!['pageCountLocked']) {
                  <p-button icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('pageCount')" severity="success"></p-button>
                }
                @if (book.metadata!['pageCountLocked']) {
                  <p-button icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('pageCount')" severity="warn"></p-button>
                }
              </div>
            </div>
          </div>
        </div>
      </div>

          <div class="flex flex-col md:flex-row w-full gap-4 mt-2 pb-1">
            <div class="flex flex-col gap-1 md:w-1/6">
              <label class="text-sm" for="reviews">Public Reviews</label>
              <div class="flex withbutton">
                <input pSize="small" pInputText class="w-full" [disabled]="true" value="No Value"/>
                @if (!book.metadata!['reviewsLocked']) {
                  <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('reviews')" severity="success"></p-button>
                }
                @if (book.metadata!['reviewsLocked']) {
                  <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('reviews')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="flex flex-col gap-1 md:w-1/6">
              <label class="text-sm" for="isbn10">ISBN 10</label>
              <div class="flex withbutton">
                <input pSize="small" pInputText id="isbn10" formControlName="isbn10" class="w-full"/>
                @if (!book.metadata!['isbn10Locked']) {
                  <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('isbn10')" severity="success"></p-button>
                }
                @if (book.metadata!['isbn10Locked']) {
                  <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('isbn10')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="flex flex-col gap-1 md:w-1/6">
              <label class="text-sm" for="isbn13">ISBN 13</label>
              <div class="flex withbutton">
                <input pSize="small" pInputText id="isbn13" formControlName="isbn13" class="w-full"/>
                @if (!book.metadata!['isbn13Locked']) {
                  <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('isbn13')" severity="success"></p-button>
                }
                @if (book.metadata!['isbn13Locked']) {
                  <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('isbn13')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="flex flex-col gap-1 md:w-1/6">
              <label class="text-sm" for="asin">Amazon ASIN</label>
              <div class="flex withbutton">
                <input pSize="small" pInputText id="asin" formControlName="asin" class="w-full"/>
                @if (!book.metadata!['asinLocked']) {
                  <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('asin')" severity="success"></p-button>
                }
                @if (book.metadata!['asinLocked']) {
                  <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('asin')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="flex flex-col gap-1 md:w-1/6">
              <label class="text-sm" for="amazonRating">Amazon ★</label>
              <div class="flex withbutton">
                <input pSize="small" pInputText id="amazonRating" formControlName="amazonRating" class="w-full"/>
                @if (!book.metadata!['amazonRatingLocked']) {
                  <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('amazonRating')" severity="success"></p-button>
                }
                @if (book.metadata!['amazonRatingLocked']) {
                  <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('amazonRating')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="flex flex-col gap-1 md:w-1/6">
              <label class="text-sm" for="amazonRatingCount">Amazon #</label>
              <div class="flex withbutton">
                <input pSize="small" pInputText id="amazonRatingCount" formControlName="amazonReviewCount" class="w-full"/>
                @if (!book.metadata!['amazonReviewCountLocked']) {
                  <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('amazonReviewCount')" severity="success"></p-button>
                }
                @if (book.metadata!['amazonReviewCountLocked']) {
                  <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('amazonReviewCount')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="flex flex-col gap-1 md:w-1/6">
              <label class="text-sm" for="googleId">Google Books ID</label>
              <div class="flex withbutton">
                <input pSize="small" pInputText id="googleId" formControlName="googleId" class="w-full"/>
                @if (!book.metadata!['googleIdLocked']) {
                  <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('googleId')" severity="success"></p-button>
                }
                @if (book.metadata!['googleIdLocked']) {
                  <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('googleId')" severity="warn"></p-button>
                }
              </div>
            </div>
          </div>

          <div class="flex flex-col md:flex-row w-full gap-4 mt-2 pb-1">
            <div class="flex flex-col gap-1 md:w-1/6">
              <label class="text-sm" for="goodreadsId">Goodreads ID</label>
              <div class="flex withbutton">
                <input pSize="small" pInputText id="goodreadsId" formControlName="goodreadsId" class="w-full"/>
                @if (!book.metadata!['goodreadsIdLocked']) {
                  <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('goodreadsId')" severity="success"></p-button>
                }
                @if (book.metadata!['goodreadsIdLocked']) {
                  <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('goodreadsId')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="flex flex-col gap-1 md:w-1/6">
              <label class="text-sm" for="goodreadsRating">Goodreads ★</label>
              <div class="flex withbutton">
                <input pSize="small" pInputText id="goodreadsRating" formControlName="goodreadsRating" class="w-full"/>
                @if (!book.metadata!['goodreadsRatingLocked']) {
                  <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('goodreadsRating')" severity="success"></p-button>
                }
                @if (book.metadata!['goodreadsRatingLocked']) {
                  <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('goodreadsRating')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="flex flex-col gap-1 md:w-1/6">
              <label class="text-sm" for="goodreadsReviewCount">Goodreads #</label>
              <div class="flex withbutton">
                <input pSize="small" pInputText id="goodreadsReviewCount" formControlName="goodreadsReviewCount" class="w-full"/>
                @if (!book.metadata!['goodreadsReviewCountLocked']) {
                  <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('goodreadsReviewCount')" severity="success"></p-button>
                }
                @if (book.metadata!['goodreadsReviewCountLocked']) {
                  <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('goodreadsReviewCount')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="flex flex-col gap-1 md:w-1/6">
              <label class="text-sm" for="hardcoverId">Hardcover ID</label>
              <div class="flex withbutton">
                <input pSize="small" pInputText id="hardcoverId" formControlName="hardcoverId" class="w-full"/>
                @if (!book.metadata!['hardcoverIdLocked']) {
                  <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('hardcoverId')" severity="success"></p-button>
                }
                @if (book.metadata!['hardcoverIdLocked']) {
                  <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('hardcoverId')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="flex flex-col gap-1 md:w-1/6">
              <label class="text-sm" for="hardcoverRating">Hardcover ★</label>
              <div class="flex withbutton">
                <input pSize="small" pInputText id="hardcoverRating" formControlName="hardcoverRating" class="w-full"/>
                @if (!book.metadata!['hardcoverRatingLocked']) {
                  <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('hardcoverRating')" severity="success"></p-button>
                }
                @if (book.metadata!['hardcoverRatingLocked']) {
                  <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('hardcoverRating')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="flex flex-col gap-1 md:w-1/6">
              <label class="text-sm" for="hardcoverReviewCount">Hardcover #</label>
              <div class="flex withbutton">
                <input pSize="small" pInputText id="hardcoverReviewCount" formControlName="hardcoverReviewCount" class="w-full"/>
                @if (!book.metadata!['hardcoverReviewCountLocked']) {
                  <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('hardcoverReviewCount')" severity="success"></p-button>
                }
                @if (book.metadata!['hardcoverReviewCountLocked']) {
                  <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('hardcoverReviewCount')" severity="warn"></p-button>
                }
              </div>
            </div>
            <div class="flex flex-col gap-1 md:w-1/6">
              <label class="text-sm" for="comicvineId">Comicvine ID</label>
              <div class="flex withbutton">
                <input pSize="small" pInputText id="comicvineId" formControlName="comicvineId" class="w-full"/>
                @if (!book.metadata!['comicvineIdLocked']) {
                  <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('comicvineId')" severity="success"></p-button>
                }
                @if (book.metadata!['comicvineIdLocked']) {
                  <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('comicvineId')" severity="warn"></p-button>
                }
              </div>
            </div>
          </div>

          <div class="flex flex-col flex-grow md:flex-row w-full gap-4 mt-4 mb-4">
            <div class="flex flex-col gap-1 w-full h-full">
              <label class="text-sm" for="description">Description</label>
              <div class="flex flex-grow w-full withbutton">
                <textarea
                  id="description"
                  pTextarea
                  formControlName="description"
                  rows="10"
                  class="w-full h-full">
                </textarea>
                @if (!book.metadata!['descriptionLocked']) {
                  <p-button size="small" icon="pi pi-lock-open" [outlined]="true" (onClick)="toggleLock('description')" severity="success"></p-button>
                }
                @if (book.metadata!['descriptionLocked']) {
                  <p-button size="small" icon="pi pi-lock" [outlined]="true" (onClick)="toggleLock('description')" severity="warn"></p-button>
                }
              </div>
            </div>
          </div>
    </div>
    <div class="mt-auto">
      <p-divider></p-divider>
      <div class="flex flex-col gap-2 px-0 md:px-2 pt-4 md:pb-4 z-10">

        <!-- Desktop Buttons -->
        <div class="hidden sm:flex justify-between w-full gap-4">
          @if (showNavigationButtons) {
            <div class="flex gap-x-4">
              <p-button label="Close" icon="pi pi-times" [outlined]="true" severity="danger" (onClick)="closeDialog()"></p-button>
              <p-divider layout="vertical"/>
              <p-button label="Previous Book" [disabled]="disablePrevious" icon="pi pi-arrow-left" [outlined]="true" severity="info" (onClick)="onPrevious()"></p-button>
              <p-button label="Next Book" [disabled]="disableNext" icon="pi pi-arrow-right" iconPos="right" [outlined]="true" severity="info" (onClick)="onNext()"></p-button>
            </div>
          }

          <div class="flex gap-x-4 items-center ml-auto">
            <p-button
              [label]="isAutoFetching ? 'Fetching…' : 'Auto Fetch'"
              [icon]="isAutoFetching ? 'pi pi-spin pi-spinner' : 'pi pi-bolt'"
              [outlined]="true"
              severity="info"
              (onClick)="autoFetch(book.id)"
              [disabled]="isAutoFetching"
              pTooltip="Automatically fetch metadata using default sources"
              tooltipPosition="top">
            </p-button>
            <p-divider layout="vertical"/>
            <p-button label="Unlock All" icon="pi pi-lock-open" [outlined]="true" severity="success" (onClick)="unlockAll()" pTooltip="Unlock all metadata fields for editing" tooltipPosition="top"></p-button>
            <p-button label="Lock All" icon="pi pi-lock" [outlined]="true" severity="warn" (onClick)="lockAll()" pTooltip="Lock all metadata fields to prevent changes" tooltipPosition="top"></p-button>
            <p-divider layout="vertical"/>
            <p-button label="Save" icon="pi pi-check" [loading]="isSaving" [disabled]="isSaving" (onClick)="onSave()"></p-button>
          </div>
        </div>

        <!-- Mobile Buttons -->
        <div class="flex sm:hidden justify-between w-full flex-wrap">
          @if (showNavigationButtons) {
            <div class="flex gap-2 flex-wrap">
              <p-button size="small" icon="pi pi-times" [outlined]="true" severity="danger" (onClick)="closeDialog()" pTooltip="Close" tooltipPosition="top"></p-button>
              <p-button size="small" icon="pi pi-arrow-left" [disabled]="disablePrevious" [outlined]="true" severity="info" (onClick)="onPrevious()" pTooltip="Previous Book" tooltipPosition="top"></p-button>
              <p-button size="small" icon="pi pi-arrow-right" [disabled]="disableNext" iconPos="right" [outlined]="true" severity="info" (onClick)="onNext()" pTooltip="Next Book" tooltipPosition="top"></p-button>
            </div>
          }

          <div class="flex justify-between items-center w-full gap-4">
            <div class="flex gap-4">
              <p-button
                icon="pi pi-bolt"
                [outlined]="true"
                severity="info"
                (onClick)="autoFetch(book.id)"
                [disabled]="isAutoFetching"
                pTooltip="Auto Fetch"
                tooltipPosition="top">
              </p-button>

              <p-button
                icon="pi pi-lock-open"
                [outlined]="true"
                severity="success"
                (onClick)="unlockAll()"
                pTooltip="Unlock All"
                tooltipPosition="top">
              </p-button>

              <p-button
                icon="pi pi-lock"
                [outlined]="true"
                severity="warn"
                (onClick)="lockAll()"
                pTooltip="Lock All"
                tooltipPosition="top">
              </p-button>
            </div>

            <div>
              <p-button
                label="Save"
                icon="pi pi-check"
                [loading]="isSaving"
                [disabled]="isSaving"
                (onClick)="onSave()">
              </p-button>
            </div>
          </div>
        </div>

      </div>
    </div>
  </form>
}
